<template>
  <div class='page-content user'>
    <div class="header">
      <div class="left-wrap">
        <el-avatar :src="form.headImage" class="avatar"></el-avatar>
        <!-- <img class="avatar" :src="form.headImage"/> -->
        <el-upload
            action="http://112.74.61.241:8081/minio/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <el-button size="small" type="primary">点击上传头像</el-button>
        </el-upload>
        <h2>{{date}}，{{this.form.name}}</h2>
        <p>新的一天又开始了</p>
      </div>
      <div class="right-wrap">
        <img src="@/assets/images/icon1.png"/>
      </div>
    </div>

    <div class="info">
      <h1 class="title">基本设置</h1>

      <el-form :model="form" class="form" :rules="rules" ref="ruleForm" 
        label-width="86px"
        label-position="top"
      >
        <el-form-item label="昵称" prop="name">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.name" :disabled="!isEdit"/>
          </el-col>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.email" :disabled="!isEdit"/>
          </el-col>
        </el-form-item>
        <el-form-item label="手机" prop="mobilePhone">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.mobilePhone" :disabled="!isEdit"/>
          </el-col>
        </el-form-item>
        <el-form-item label="权限等级">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.admLabel" disabled/>
          </el-col>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <div :disabled="!isEdit">
            <el-radio v-model="form.sex" label="男">男</el-radio>
            <el-radio v-model="form.sex" label="女">女</el-radio>
          </div>
        </el-form-item>
        <!-- <el-form-item label="个人介绍" prop="des">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input type="textarea" rows="4" v-model="form.des" :disabled="!isEdit"/>
          </el-col>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" style="width: 90px" @click="edit">
            {{isEdit ? '保存' : '编辑'}}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { getAdmInfo, update } from "#/User/admin.js"
  export default {
    name: 'user',
    meta: {
      title: '个人中心'
    },
    data () {
      return {
        isEdit: false,
        date: '',
        form: {},
        rules: {
          name: [
            { required: true, message: '请输入昵称', trigger: 'blur' },
            { min: 2, max: 50, message: '长度在 2 到 30 个字符', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入昵称', trigger: 'blur' }
          ],
          mobilePhone: [
            { required: true, message: '请输入手机号码', trigger: 'blur' }
          ],
          sex: [
            { required: true, message: '请选择性别', trigger: 'blur' }
          ]
        },
        seller: {
          avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        }
      };
    },
    mounted() {
      this.getDate()
      this.getUser();
    },
    methods: {
      getDate() {
        const d = new Date()
        const h = d.getHours()
        let date

        if(h >= 6 && h < 9) {
          date = '早上好'
        }else if(h >= 9 && h < 11) {
          date = '上午好'
        }else if(h >= 11 && h < 13) {
          date = '中午好'
        }else if(h >= 13 && h < 18) {
          date = '下午好'
        }else if(h >= 18 && h < 24) {
          date = '晚上好'
        }else if(h >= 0 && h < 6) {
          date = '很晚了，早点睡'
        }

        this.date = date
      },
      getUser() {
        getAdmInfo(window.sessionStorage.getItem('userId')).then(res => {
          // console.log(res)
          if(res.data.ret === 0) {
            this.form = res.data.admUser
            this.form.admLabel = res.data.admUser.roleInfo.label
            if(!this.form.headImage) {
              this.$set(this.form, 'headImage', 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
            }
          } else {
            this.$message.error('获取管理员信息错误')
          }
        })
      },
      edit() {
        if(this.isEdit === true) {
          this.submitForm('ruleForm')
        } else {
          this.isEdit = !this.isEdit
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            update(window.sessionStorage.getItem('userId'), this.form).then(res => {
              if(res.data.ret === 0) {
                this.$message.success('更新管理员信息成功！')
                this.isEdit = false
              } else {
                this.$message.error('更新失败！')
              }
            })
          } else {
            this.$message.error('填写有误！')
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleAvatarSuccess(res) {
        console.log(res)
        if(res.ret === 0) {
          this.form.headImage = res.url
          this.submitForm('ruleForm')
        }
      },
      beforeAvatarUpload(file) {
        const type = file.type === 'image/jpeg' || 'image/jpg' || 'image/webp' || 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!type) {
          this.$message.error('图片格式不正确!(只能包含jpg，png，webp，JPEG)')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return type && isLt2M
      }
    },
  }
</script>

<style lang="scss">
  .user {
    .icon {
      width: 1.4em;
      height: 1.4em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
  }
</style>

<style lang='scss' scoped>
  .page-content {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    background: transparent !important;

    .header {
      background: #fff;
      padding: 30px 40px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .left-wrap {
        .avatar {
          width: 120px;
          height: 120px;
          border-radius: 50%;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader-icon{
          font-size: 0;
          color: #fff;
          width: 90px;
          height: 90px;
          line-height: 90px;
          text-align: center;
        }
        .avatar:hover{
          font-size: 28px;
          background-color: rgba(0, 0, 0, .3);
        }

        h2 {
          font-size: 30px;
          margin-top: 20px;
          font-weight: 500;
        }

        p {
          color: #9CA3AE;
          font-size: 14px;
          margin-top: 20px;
          display: none;
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;

        img {
          width: 230px;
        }
      }
    }

    .info {
      margin-top: 15px;
      background: #fff;

      .title {
        font-size: 22px;
        font-weight: 500;
        padding: 15px 40px;
        border-bottom: 1px solid #eee;
      }

      .form {
        padding: 30px 40px;
        box-sizing: border-box;
      }
    }
  }

  @media only screen { 
    .page-content {

      .header {
        padding: 20px 20px;

        .left-wrap {
          .avatar {
            width: 90px;
            height: 90px;
          }

          h2 {
            font-size: 20px;
            margin-top: 20px;
          }
        }
      }

      .info {

        .title {
          font-size: 18px;
          padding: 15px 20px;
        }

        .form {
          padding: 30px 20px;
        }
      }
    }
  }
  
</style>